<template>
  <div class="container">
      <view-box ref="viewBox" body-padding-top="46px" body-padding-bottom="54px">
        <x-header class="my-header" title="护士上门" ></x-header>
        <div style="height: 100%;margin-top: 40px">
          <img src="../../assets/logo.png"class="center"/>
          <group class="weui-cells_form">
            <x-input title="手机号码" mask="99999999999" v-model="phoneNum" :max="13" is-type="china-mobile"></x-input>
            <x-input title="验证码 " class="weui-vcode" v-model="verficationCode">
              <x-button v-if="!isSend" slot="right" type="primary" mini @click.native="sendCode()">发送验证码</x-button>
              <x-button :disabled="true" v-if="isSend" slot="right" type="primary" mini @click="sendCode()" style="width: 99px">
                <countdown v-model="time" :start="isSend" @on-finish="finished()"></countdown>秒重发
              </x-button>
            </x-input>
          </group>
          <toast v-model="showPositionValue" type="text" :time="1000" is-show-mask text="登录成功" position="bottom"></toast>
          <toast v-model="wrong" type="text" :time="2000" is-show-mask text="验证码错误" position="bottom"></toast>
          <toast v-model="isLogin" type="text" :time="1500" is-show-mask text="未登录或身份验证过期" position="bottom"></toast>
          <box gap="10px 10px">
            <x-button :gradients="['#1D62F0', '#19D5FD']" @click.native="login()">登录</x-button>
          </box>
        </div>
        <tabbar slot="bottom" id="tabbar">
          <tabbar-item :link="{path:'/',replace:true}" >
            <img slot="icon" src="../../assets/home@3x.png">
            <span slot="label">主页</span>
          </tabbar-item>
          <tabbar-item :link="{path:'/service_item',replace:true}" >
            <img slot="icon" src="../../assets/nurse@3x.png">
            <span slot="label">护士上门</span>
          </tabbar-item>
          <tabbar-item :link="{path:'/user_center',replace:true}">
            <img slot="icon" src="../../assets/me_def@3x.png">
            <span slot="label">个人中心</span>
          </tabbar-item>
        </tabbar>
      </view-box>
  </div>
</template>

<script>
  import { Tabbar, TabbarItem,Drawer,ViewBox,Toast,Countdown, Box, XInput, Group, XButton, Cell,XHeader, Actionsheet, TransferDom, ButtonTab, ButtonTabItem } from 'vux'
  export default {
    data(){
      return{
          loginData:'',       //登录验证失败后跳转至登录界面时传的data
        isLogin:false,        //显示未登录提示框
        showMenu: false,
        time:60,
        phoneNum:'',
        verficationCode:'',
        isSend:false,
        showPositionValue:false,
        wrong:false,
        isWeixin:false
      }
    },
    mounted(){
      this.is_weixin()
        this.loginData=this.$route.query
      this.isLogin=this.$route.query.isLogin
      this.$emit("titlename","协航健康用户登录")
    },
    methods:{

        //检查是否在微信中
      is_weixin() {
        let  ua = window.navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
          this.isWeixin=true
        } else {
          this.isWeixin=false
        }
      },
      //发送验证码
      sendCode(){
        let data={
          tel:this.phoneNum
        }
        this.Ajax('post','/javaapi/user/captcha',data,(res)=>{
          if(res.body.sc=='200'){
            this.isSend=true;
          }
        })
      },
      login(){          //登录函数
        let data={
          tel:this.phoneNum,
          captcha:this.verficationCode
        }
        this.Ajax('post','/javaapi/oauth2/login/consumer',data,(res)=>{
          if(res.uid){       //成功返回
            this.showPositionValue=true
            let data=res;
            this.setCookie('uid',data.uid,365)
            this.setCookie('token',data.token,365)
            this.setCookie('refreshToken',data.refreshToken,365)
            if(this.isWeixin){   //如果在微信中，调用获取用户的openid
              window.location.href='https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxfc568fc6470c417d&redirect_uri=http%3a%2f%2fweb.hellohushi.com%2fjavaapi%2fwechat%2fuser%2f'+data.uid+'&response_type=code&scope=snsapi_base&state=http%3a%2f%2fweb.hellohushi.com#wechat_redirect';
            }
            if(this.isLogin){           //判断是从哪个页面调过来的再跳转回去
              setTimeout(()=>{
                this.$router.push({
                  path:this.loginData.originPath,
                  query:this.loginData
                });
              },1000)
            }else{
              setTimeout(()=>{
                this.$router.push("/");
              },1000)
            }
          }else if(res.body.sc=='23002'){   //登录失败
            this.wrong=true
          }
        })
      },
      finished(){
        this.isSend=false
        this.time=60
      }
    },
    components: {
      Tabbar, TabbarItem,Drawer,ViewBox,Toast,
      Countdown,
      XButton,
      Box,
      XInput,
      Group,
      Cell,
      XHeader,
      Actionsheet,
      ButtonTab,
      ButtonTabItem
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .my-header {
    position: fixed;
    height: 46px;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 100;
    background-color: rgb(255, 104, 140)
  }
  .center {
    display: block;
    margin: 0 auto;
    text-align: center;

    border-radius: 10px 10px 10px 10px;
    height: 75px;
    width: 75px;
  }
  .weui-cells_form{
    padding-top: 50px;
    width: 95%;
    margin: 0 auto;
  }
  #tabbar{
    position: fixed;
  }
</style>
